<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { adminGetDocumentDetailService } from '@/api/admin'
import { userGetDocumentDetailService } from '@/api/user'

const videoId = ref<string | undefined>()
const route = useRoute()

// 获取视频 ID
const getVideoId = () => {
  videoId.value = route.params.id as string
  console.log(videoId.value)
}

getVideoId()

// 视频数据，包括文件 URL 和其他信息
const videoData = ref({
  title: '',
  documentUrl: '',
  remark: '',
  createTime: '',
  publisher: ''
})

// 文件 URL 和文件类型
const fileUrl = ref<string | undefined>()
const fileType = ref<string>('unknown') // 默认未知类型

// 获取文档详细信息
const getDocumentDetail = async () => {
  const res = await userGetDocumentDetailService(videoId.value)
  console.log(res.data.data)
  videoData.value = res.data.data
  fileUrl.value = res.data.data.documentUrl
}

// 调用获取文档详细信息
getDocumentDetail()

// 文件类型判断方法
const getFileType = (fileUrl: string | undefined): string => {
  if (!fileUrl) {
    console.error('Invalid fileUrl:', fileUrl)
    return 'unknown'
  }
  const extension = fileUrl.split('.').pop()?.toLowerCase()
  if (extension === 'pdf') {
    return 'pdf'
  } else if (extension === 'docx' || extension === 'doc') {
    return 'office'
  }
  return 'unknown'
}

// 监听 fileUrl 的变化，自动更新文件类型
watch(fileUrl, (newFileUrl) => {
  fileType.value = getFileType(newFileUrl)
})

// 生成预览 URL 的方法
const getPreviewUrl = (fileUrl: string | undefined, fileType: string): string => {
  if (fileType === 'pdf' && fileUrl) {
    // PDF 文件的预览 URL
    return `https://docs.google.com/viewer?embedded=true&url=${encodeURIComponent(fileUrl)}`
  } else if (fileType === 'office' && fileUrl) {
    // Office 文件（如 docx, xlsx, pptx 等）的预览 URL
    return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`
  }
  return ''
}

// 计算预览 URL
const previewUrl = computed(() => {
  return getPreviewUrl(fileUrl.value, fileType.value)
})
</script>

<template>
  <div id="main-teaResourceVideoPlayPage">
    <h1>{{ videoData.title }}</h1>
    <div style="display: flex; margin-top: 20px">
      <div>发布者: {{ videoData.publisher }}</div>
      <div style="margin-left: 20px">{{ videoData.createTime }}</div>
    </div>

    <iframe
      v-if="previewUrl"
      :src="previewUrl"
      style="width: 98%; height: 100vh; border: none; margin-top: 20px"
    ></iframe>
    <p v-else>暂不支持该文件预览</p>
  </div>
</template>

<style scoped>
#main-teaResourceVideoPlayPage {
  width: 100%;
  margin: 20px;
  position: relative;
}

video {
  width: 90%;
  height: auto;
  margin-top: 20px;
}
</style>
